<template>
  <div>
    <!-- 新增迟到早退扣款规则 -->
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="span1">新增迟到早退扣款规则</span>
        </div>
        <div class="text item1">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="方案名称" prop="name">
              <el-input v-model="ruleForm.name" class="input1"></el-input>
              <el-checkbox
                label="默认"
                name="type"
                style="margin-left: 20px"
              ></el-checkbox>
            </el-form-item>
            <el-form-item label="状态" prop="delivery">
              <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 10 }"
                placeholder="请输入内容"
                v-model="textarea2"
                class="input2"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <!-- 迟到扣款 -->
    <div class="div1">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="span1">迟到扣款</span>
          <span
            style="float: right; padding: 3px 0"
            type="text"
            @click="shows()"
          >
            <input type="checkbox" v-model="checkbox1" />不扣款
          </span>
        </div>
        <div class="div2">
          <el-form
            ref="form"
            :model="form"
            label-width="100px"
            style="padding: 0px 5px 0 0"
          >
            <el-form-item label="扣款方式:">
              <!-- 单选框判断显示那个 -->
              <el-radio-group v-model="form.resource">
                <el-radio :label="1" @input="form.resource = '1'"
                  >固定扣款</el-radio
                >
                <el-radio :label="2" @input="form.resource = '2'"
                  >规则设置</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <!-- 如果选择的是规则设置展示这个 -->
            <div v-if="form.resource === 2">
              <el-form-item label="扣款类型" prop="delivery">
                <el-radio-group v-model="radio2">
                  <el-radio-button label="迟到时长"></el-radio-button>
                  <el-radio-button label="迟到次数"></el-radio-button>
                </el-radio-group>
                <input
                  type="checkbox"
                  v-model="checkbox2"
                  style="margin-left: 20px"
                /><span style="margin-left: 10px">累计</span>
              </el-form-item>
              <!-- 如果选择的是迟到时长 -->
              <div v-if="radio2 === '迟到时长' && checkbox2 === false">
                <el-form-item>
                  <span style="margin-left: 40px">迟到</span>
                  <el-input
                    value="0"
                    style="width: 10%; margin-left: 10px"
                    disabled="true"
                  />
                  <span style="margin-left: 10px; font-size: 18px">至</span>
                  <el-input
                    v-model="form.day6"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px"
                    >（含）次</span
                  >
                  <el-input
                    v-model="form.day7"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px">元/次</span>
                  <span style="margin-left: 30px; color: blueviolet">添加</span
                  ><br />
                </el-form-item>
              </div>
              <!-- 如果选择的是迟到时长并且勾选了累计 -->
              <div v-if="radio2 === '迟到时长' && checkbox2 === true">
                <el-form-item>
                  <span style="margin-left: 40px">迟到</span>
                  <el-input
                    value="0"
                    style="width: 10%; margin-left: 10px"
                    disabled="true"
                  />
                  <span style="margin-left: 10px; font-size: 18px">至</span>
                  <el-input
                    v-model="form.day12"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px"
                    >（含）次</span
                  >
                  <el-select
                    v-model="form.region1"
                    placeholder="请选择活动区域"
                    style="width: 10%; height: 25px; margin-left: 30px"
                  >
                    <el-option label="按分钟" value="1"></el-option>
                    <el-option label="按事假" value="4"></el-option>
                    <el-option label="按旷工" value="2"></el-option>
                    <el-option label="按固定金额" value="3"></el-option>
                  </el-select>
                  <el-input
                    v-model="form.day13"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region1 === '1'"
                    >元/次</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region1 === '2'"
                    >小时</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region1 === '4'"
                    >小时</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region1 === '3'"
                    >元/月</span
                  >
                  <span style="margin-left: 30px; color: blueviolet">添加</span>
                </el-form-item>
                <el-form-item label="个性化设置:" style="margin-top: 10px">
                  <span>每月累计迟到不超过</span>
                  <el-input
                    v-model="form.day14"
                    style="width: 10%; margin-left: 10px"
                  />
                  <span style="margin-left: 10px">次，且单次迟到分钟数在</span>
                  <el-input
                    v-model="form.day15"
                    style="width: 10%; margin-left: 10px"
                  />
                  <span style="margin-left: 10px">分钟内不扣款</span>
                </el-form-item>
              </div>
              <!-- 如果选择迟到次数-->
              <div v-if="radio2 === '迟到次数' && checkbox2 === false">
                <el-form-item>
                  <span style="margin-left: 40px">迟到</span>
                  <el-input
                    value="0"
                    style="width: 10%; margin-left: 10px"
                    disabled="true"
                  />
                  <span style="margin-left: 10px; font-size: 18px">至</span>
                  <el-input
                    v-model="form.day8"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px"
                    >（含）次</span
                  >
                  <el-input
                    v-model="form.day9"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region === '1'"
                    >元/次</span
                  >
                  <span style="margin-left: 30px; color: blueviolet">添加</span
                  ><br />
                  <!-- 第二行 -->
                  <span style="margin-left: 40px">迟到</span>
                  <el-input
                    value="4"
                    style="width: 10%; margin-left: 10px; margin-top: 20px"
                    disabled="true"
                  />
                  <span style="margin-left: 10px; font-size: 18px">至</span>
                  <el-input
                    v-model="form.day10"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px"
                    >（含）次</span
                  >
                  <el-input
                    v-model="form.day11"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px">元/次</span>
                  <span style="margin-left: 30px; color: blueviolet">添加</span>
                  <span style="margin-left: 20px; color: red">删除</span>
                </el-form-item>
              </div>
              <!-- 如果选择迟到次数并且勾选了累计 -->
              <div v-if="radio2 === '迟到次数' && checkbox2 === true">
                <el-form-item>
                  <span style="margin-left: 40px">迟到</span>
                  <el-input
                    value="0"
                    style="width: 10%; margin-left: 10px"
                    disabled="true"
                  />
                  <span style="margin-left: 10px; font-size: 18px">至</span>
                  <el-input
                    v-model="form.day16"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px"
                    >（含）次</span
                  >
                  <el-select
                    v-model="form.region"
                    placeholder="请选择活动区域"
                    style="width: 10%; height: 25px; margin-left: 30px"
                  >
                    <el-option label="按分钟" value="1"></el-option>
                    <el-option label="按事假" value="4"></el-option>
                    <el-option label="按旷工" value="2"></el-option>
                    <el-option label="按固定金额" value="3"></el-option>
                  </el-select>
                  <el-input
                    v-model="form.day17"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region === '1'"
                    >元/次</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region === '2'"
                    >小时</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region === '4'"
                    >小时</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region === '3'"
                    >元/月</span
                  >
                  <span style="margin-left: 30px; color: blueviolet">添加</span
                  ><br />
                  <!-- 第二行 -->
                  <span style="margin-left: 40px">迟到</span>
                  <el-input
                    value="4"
                    style="width: 10%; margin-left: 10px; margin-top: 20px"
                    disabled="true"
                  />
                  <span style="margin-left: 10px; font-size: 18px">至</span>
                  <el-input
                    v-model="form.day18"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px"
                    >（含）次</span
                  >
                  <el-select
                    v-model="form.region2"
                    placeholder="请选择活动区域"
                    style="width: 10%; height: 25px; margin-left: 30px"
                  >
                    <el-option label="按分钟" value="1"></el-option>
                    <el-option label="按事假" value="4"></el-option>
                    <el-option label="按旷工" value="2"></el-option>
                    <el-option label="按固定金额" value="3"></el-option>
                  </el-select>
                  <el-input
                    v-model="form.day19"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region2 === '1'"
                    >元/次</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region2 === '2'"
                    >小时</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region2 === '4'"
                    >小时</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region2 === '3'"
                    >元/月</span
                  >
                  <span style="margin-left: 30px; color: blueviolet">添加</span>
                  <span style="margin-left: 20px; color: red">删除</span>
                </el-form-item>
                <el-form-item label="个性化设置:" style="margin-top: 10px">
                  <span>每月累计迟到不超过</span>
                  <el-input
                    v-model="form.day14"
                    style="width: 10%; margin-left: 10px"
                  />
                  <span style="margin-left: 10px">次，且单次迟到分钟数在</span>
                  <el-input
                    v-model="form.day15"
                    style="width: 10%; margin-left: 10px"
                  />
                  <span style="margin-left: 10px">分钟内不扣款</span>
                </el-form-item>
              </div>
            </div>
            <!-- 如果选择的是固定扣款显示这个 -->
            <div v-if="form.resource === 1">
              <!-- 计薪比例 -->
              <el-form-item label="扣款类型:">
                <el-radio-group v-model="radio1">
                  <el-radio-button label="迟到时长"></el-radio-button>
                  <el-radio-button label="迟到次数"></el-radio-button>
                  <el-radio-button label="固定金额"></el-radio-button>
                </el-radio-group>
              </el-form-item>
              <!-- 选择迟到时长显示 -->
              <div v-if="radio1 === '迟到时长'">
                <span style="margin-left: 100px">迟到</span>
                <el-input
                  v-model="form.day1"
                  style="width: 20%; margin-left: 10px"
                />
                <span style="margin-left: 10px">元/分钟</span>
                <el-form-item label="个性化设置:" style="margin-top: 10px">
                  <span>每月累计迟到不超过</span>
                  <el-input
                    v-model="form.day2"
                    style="width: 10%; margin-left: 10px"
                  />
                  <span style="margin-left: 10px">分钟，不扣款</span>
                </el-form-item>
              </div>
              <!-- 选择迟到次数显示 -->
              <div v-if="radio1 === '迟到次数'">
                <span style="margin-left: 100px">迟到</span>
                <el-input
                  v-model="form.day3"
                  style="width: 20%; margin-left: 10px"
                />
                <span style="margin-left: 10px">元/次</span>
                <el-form-item label="个性化设置:" style="margin-top: 10px">
                  <span>每月累计迟到不超过</span>
                  <el-input
                    v-model="form.day4"
                    style="width: 10%; margin-left: 10px"
                  />
                  <span style="margin-left: 10px">分钟，不扣款</span>
                </el-form-item>
              </div>
              <!-- 选择固定金额显示 -->
              <div v-if="radio1 === '固定金额'">
                <span style="margin-left: 100px">迟到</span>
                <el-input
                  v-model="form.day5"
                  style="width: 20%; margin-left: 10px"
                />
                <span style="margin-left: 10px">元/月</span>
              </div>
            </div>
          </el-form>
        </div>
      </el-card>
    </div>
    <!-- 早退扣款 -->
    <div class="div4">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="span1">早退扣款</span>
          <span
            style="float: right; padding: 3px 0"
            type="text"
            @click="shows1()"
          >
            <input type="checkbox" v-model="forms.checkbox1" />不扣款
          </span>
        </div>
        <div class="div3">
          <el-form
            ref="forms"
            :model="forms"
            label-width="100px"
            style="padding: 0px 5px 0 0"
          >
            <el-form-item label="扣款方式:">
              <!-- 单选框判断显示那个 -->
              <el-radio-group v-model="forms.resource">
                <el-radio :label="1" @input="forms.resource = '1'"
                  >固定扣款</el-radio
                >
                <el-radio :label="2" @input="forms.resource = '2'"
                  >规则设置</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <!-- 如果选择的是规则设置展示这个 -->
            <div v-if="forms.resource === 2">
              <el-form-item label="扣款类型" prop="delivery">
                <el-radio-group v-model="forms.radio2">
                  <el-radio-button label="早退时长"></el-radio-button>
                  <el-radio-button label="早退次数"></el-radio-button>
                </el-radio-group>
                <input
                  type="checkbox"
                  v-model="forms.checkbox2"
                  style="margin-left: 20px"
                /><span style="margin-left: 10px">累计</span>
              </el-form-item>
              <!-- 如果选择的是早退时长 -->
              <div v-if="forms.radio2 === '早退时长' && forms.checkbox2 === false">
                <el-form-item>
                  <span style="margin-left: 40px">早退</span>
                  <el-input
                    value="0"
                    style="width: 10%; margin-left: 10px"
                    disabled="true"
                  />
                  <span style="margin-left: 10px; font-size: 18px">至</span>
                  <el-input
                    v-model="forms.day6"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px"
                    >（含）次</span
                  >
                  <el-input
                    v-model="forms.day7"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px">元/次</span>
                  <span style="margin-left: 30px; color: blueviolet">添加</span
                  ><br />
                </el-form-item>
              </div>
              <!-- 如果选择的是早退时长并且勾选了累计 -->
              <div v-if="forms.radio2 === '早退时长' && forms.checkbox2 === true">
                <el-form-item>
                  <span style="margin-left: 40px">早退</span>
                  <el-input
                    value="0"
                    style="width: 10%; margin-left: 10px"
                    disabled="true"
                  />
                  <span style="margin-left: 10px; font-size: 18px">至</span>
                  <el-input
                    v-model="forms.day12"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px"
                    >（含）次</span
                  >
                  <el-select
                    v-model="forms.region"
                    placeholder="请选择活动区域"
                    style="width: 10%; height: 25px; margin-left: 30px"
                  >
                    <el-option label="按分钟" value="1"></el-option>
                    <el-option label="按事假" value="4"></el-option>
                    <el-option label="按旷工" value="2"></el-option>
                    <el-option label="按固定金额" value="3"></el-option>
                  </el-select>
                  <el-input
                    v-model="forms.day13"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="forms.region === '1'"
                    >元/次</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="forms.region === '2'"
                    >小时</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="forms.region === '4'"
                    >小时</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="forms.region === '3'"
                    >元/月</span
                  >
                  <span style="margin-left: 30px; color: blueviolet">添加</span>
                </el-form-item>
                <el-form-item label="个性化设置:" style="margin-top: 10px">
                  <span>每月累计早退不超过</span>
                  <el-input
                    v-model="forms.day14"
                    style="width: 10%; margin-left: 10px"
                  />
                  <span style="margin-left: 10px">次，且单次早退分钟数在</span>
                  <el-input
                    v-model="forms.day15"
                    style="width: 10%; margin-left: 10px"
                  />
                  <span style="margin-left: 10px">分钟内不扣款</span>
                </el-form-item>
              </div>
              <!-- 如果选择早退次数-->
              <div v-if="forms.radio2 === '早退次数' && forms.checkbox2 === false">
                <el-form-item>
                  <span style="margin-left: 40px">早退</span>
                  <el-input
                    value="0"
                    style="width: 10%; margin-left: 10px"
                    disabled="true"
                  />
                  <span style="margin-left: 10px; font-size: 18px">至</span>
                  <el-input
                    v-model="forms.day8"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px"
                    >（含）次</span
                  >
                  <el-input
                    v-model="forms.day9"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    >元/次</span
                  >
                  <span style="margin-left: 30px; color: blueviolet">添加</span
                  ><br />
                  <!-- 第二行 -->
                  <span style="margin-left: 40px">早退</span>
                  <el-input
                    value="4"
                    style="width: 10%; margin-left: 10px; margin-top: 20px"
                    disabled="true"
                  />
                  <span style="margin-left: 10px; font-size: 18px">至</span>
                  <el-input
                    v-model="forms.day10"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px"
                    >（含）次</span
                  >
                  <el-input
                    v-model="forms.day11"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px">元/次</span>
                  <span style="margin-left: 30px; color: blueviolet">添加</span>
                  <span style="margin-left: 20px; color: red">删除</span>
                </el-form-item>
              </div>
              <!-- 如果选择早退次数并且勾选了累计 -->
              <div v-if="forms.radio2 === '早退次数' && forms.checkbox2 === true">
                <el-form-item>
                  <span style="margin-left: 40px">早退</span>
                  <el-input
                    value="0"
                    style="width: 10%; margin-left: 10px"
                    disabled="true"
                  />
                  <span style="margin-left: 10px; font-size: 18px">至</span>
                  <el-input
                    v-model="forms.day16"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px"
                    >（含）次</span
                  >
                  <el-select
                    v-model="forms.region1"
                    placeholder="请选择活动区域"
                    style="width: 10%; height: 25px; margin-left: 30px"
                  >
                    <el-option label="按分钟" value="1"></el-option>
                    <el-option label="按事假" value="4"></el-option>
                    <el-option label="按旷工" value="2"></el-option>
                    <el-option label="按固定金额" value="3"></el-option>
                  </el-select>
                  <el-input
                    v-model="forms.day17"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="forms.region1 === '1'"
                    >元/次</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="forms.region1 === '2'"
                    >小时</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="forms.region1 === '4'"
                    >小时</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="forms.region1 === '3'"
                    >元/月</span
                  >
                  <span style="margin-left: 30px; color: blueviolet">添加</span
                  ><br />
                  <!-- 第二行 -->
                  <span style="margin-left: 40px">早退</span>
                  <el-input
                    value="4"
                    style="width: 10%; margin-left: 10px; margin-top: 20px"
                    disabled="true"
                  />
                  <span style="margin-left: 10px; font-size: 18px">至</span>
                  <el-input
                    v-model="forms.day18"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px"
                    >（含）次</span
                  >
                  <el-select
                    v-model="forms.region2"
                    placeholder="请选择活动区域"
                    style="width: 10%; height: 25px; margin-left: 30px"
                  >
                    <el-option label="按分钟" value="1"></el-option>
                    <el-option label="按事假" value="4"></el-option>
                    <el-option label="按旷工" value="2"></el-option>
                    <el-option label="按固定金额" value="3"></el-option>
                  </el-select>
                  <el-input
                    v-model="forms.day19"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="forms.region2 === '1'"
                    >元/次</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="forms.region2 === '2'"
                    >小时</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="forms.region2 === '4'"
                    >小时</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="forms.region2 === '3'"
                    >元/月</span
                  >
                  <span style="margin-left: 30px; color: blueviolet">添加</span>
                  <span style="margin-left: 20px; color: red">删除</span>
                </el-form-item>
                <el-form-item label="个性化设置:" style="margin-top: 10px">
                  <span>每月累计早退不超过</span>
                  <el-input
                    v-model="forms.day14"
                    style="width: 10%; margin-left: 10px"
                  />
                  <span style="margin-left: 10px">次，且单次早退分钟数在</span>
                  <el-input
                    v-model="forms.day15"
                    style="width: 10%; margin-left: 10px"
                  />
                  <span style="margin-left: 10px">分钟内不扣款</span>
                </el-form-item>
              </div>
            </div>
            <!-- 如果选择的是固定扣款显示这个 -->
            <div v-if="forms.resource === 1">
              <!-- 计薪比例 -->
              <el-form-item label="扣款类型:">
                <el-radio-group v-model="forms.radio1">
                  <el-radio-button label="早退时长"></el-radio-button>
                  <el-radio-button label="早退次数"></el-radio-button>
                  <el-radio-button label="固定金额"></el-radio-button>
                </el-radio-group>
              </el-form-item>
              <!-- 选择早退时长显示 -->
              <div v-if="forms.radio1 === '早退时长'">
                <span style="margin-left: 100px">早退</span>
                <el-input
                  v-model="forms.day1"
                  style="width: 20%; margin-left: 10px"
                />
                <span style="margin-left: 10px">元/分钟</span>
                <el-form-item label="个性化设置:" style="margin-top: 10px">
                  <span>每月累计早退不超过</span>
                  <el-input
                    v-model="forms.day2"
                    style="width: 10%; margin-left: 10px"
                  />
                  <span style="margin-left: 10px">分钟，不扣款</span>
                </el-form-item>
              </div>
              <!-- 选择早退次数显示 -->
              <div v-if="forms.radio1 === '早退次数'">
                <span style="margin-left: 100px">早退</span>
                <el-input
                  v-model="forms.day3"
                  style="width: 20%; margin-left: 10px"
                />
                <span style="margin-left: 10px">元/次</span>
                <el-form-item label="个性化设置:" style="margin-top: 10px">
                  <span>每月累计早退不超过</span>
                  <el-input
                    v-model="forms.day4"
                    style="width: 10%; margin-left: 10px"
                  />
                  <span style="margin-left: 10px">分钟，不扣款</span>
                </el-form-item>
              </div>
              <!-- 选择固定金额显示 -->
              <div v-if="forms.radio1 === '固定金额'">
                <span style="margin-left: 100px">早退</span>
                <el-input
                  v-model="forms.day5"
                  style="width: 20%; margin-left: 10px"
                />
                <span style="margin-left: 10px">元/月</span>
              </div>
            </div>
          </el-form>
        </div>
      </el-card>
    </div>
    <!-- 底部栏 -->
    <div class="bottom">
      <el-card class="box-card1">
        <el-button plain @click="$router.push('/home/works')">返回</el-button>
        <el-button plain>取消</el-button>
        <el-button type="primary" plain>保存</el-button>
      </el-card>
    </div>
  </div>
</template>
          
  <script>
export default {
  data() {
    return {
      //新增迟到早退扣款规则
      ruleForm: {
        name: "",
        delivery: true,
      },
      //新增迟到早退扣款规则输入的规范
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      //新增迟到早退扣款规则的多行文本框
      textarea2: "",
      //判断迟到扣款的表单是否显示
      checkbox1: false,
      //判断是否选择默认
      checkbox2: false,
      //迟到扣款的数据
      form: {
        resource: 1,
        region: "1",
        region1:'1',
        region2:'1',
        day1: "0",
        day2: "0",
        day3: "0",
        day4: "0",
        day5: "0",
        day6: "0",
        day7: "0",
        day8: "0",
        day9: "0",
        day10: "0",
        day11: "0",
        day12: "0",
        day13: "0",
        day14: "0",
        day15: "0",
        day16: "0",
        day17: "0",
        day18: "0",
        day19: "0",
      },
      //迟到扣款的多选框
      radio1: "迟到时长",
      radio2: "迟到时长",
      //早退的数据
      forms: {
        resource: 1,
        region: "1",
        region1:'1',
        region2:'1',
        day1: "0",
        day2: "0",
        day3: "0",
        day4: "0",
        day5: "0",
        day6: "0",
        day7: "0",
        day8: "0",
        day9: "0",
        day10: "0",
        day11: "0",
        day12: "0",
        day13: "0",
        day14: "0",
        day15: "0",
        day16: "0",
        day17: "0",
        day18: "0",
        day19: "0",
        radio1: "早退时长",
        radio2: "早退时长",
        //判断迟到扣款的表单是否显示
        checkbox1: false,
        //判断是否选择默认
        checkbox2: false,
      },
    };
  },
  methods: {
    //判断迟到扣款是否显示的方法
    shows() {
      let div2 = document.querySelector(".div2");
      this.checkbox1 = !this.checkbox1;
      if (this.checkbox1) {
        div2.style.display = "none";
      } else {
        div2.style.display = "block";
      }
    },
    //判断迟到扣款是否显示的方法
    shows1() {
      let div3 = document.querySelector(".div3");
      this.forms.checkbox1 = !this.forms.checkbox1;
      if (this.forms.checkbox1) {
        div3.style.display = "none";
      } else {
        div3.style.display = "block";
      }
    },
  },
};
</script>
          
  <style scoped>
.span1 {
  font-size: 18px;
  font-weight: bold;
}
.box-card {
  width: 80%;
}
.input1 {
  width: 450px;
  height: 35px;
}
.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-left: -20px;
}
.box-card1 {
  width: 100%;
}
.div1 {
  margin-top: 20px;
}
.div4 {
  margin-top: 20px;
  margin-bottom: 100px;
}
.textarea1 {
  width: 50%;
}
</style>